<template>
  <div style="margin-bottom: 0;">
    <a-table :columns="columns" :row-key="record => record.dataId" :data-source="data" :pagination="false">
      <a slot="showStatus" slot-scope="text, record">
        <div class="finish__icon" v-if="record.status == 1"></div>
        <div class="finish__icon unfinish__icon" v-else @click="setFinish(record.dataId)"></div>
      </a>
      <span slot="showScore" slot-scope="text, record">
        <div v-if="record.status == 1 && (record.score == 0 || record.score == null)">患者未做评价</div>
        <div v-else-if="record.score <= 0 || record.score == null"></div>
        <template v-else>
          <a-rate v-if="record.score > 3" v-model="record.score" disabled />
          <a-tooltip v-else>
            <template slot="title">
              {{ record.tagName && record.tagName.join('、') }}
            </template>
            <a-rate v-model="record.score" disabled />
          </a-tooltip>
        </template>
      </span>
      <span slot="action" slot-scope="text, record">
        <a v-if="record.serviceId == null" @click="deleteService(record.dataId)">删除</a>
      </span>
    </a-table>

    <a-modal
      v-model="visible"
      title="完成情况"
      ok-text="确认"
      cancel-text="取消"
      :confirm-loading="confirmLoading"
      @ok="updateStatus"
      @cancel="hideModal"
      width="400px"
    >
      <div class="executor__name">执行人：{{ executor }}</div>
      <div class="remark__bottom">
        <div class="remark__title">备&nbsp;&nbsp;&nbsp;注：</div>
        <div class="remark__input">
          <a-textarea
            v-model="remark"
            :auto-size="{ minRows: 3, maxRows: 6 }"
            :maxLength="50"
            placeholder="请输入备注内容，不超过50字"
            style="width: 280px"
          />
          <div v-if="remark.length > 0" style="position: absolute; left: 243px; top: 73px">{{ remark.length }}/50</div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { getAction, postAction, deleteAction } from '@/api/manage'

const columns = [
  {
    title: '服务项目',
    dataIndex: 'serviceName',
    align: 'center',
    width: 120
  },
  {
    title: '完成情况',
    dataIndex: 'status',
    align: 'center',
    width: 80,
    scopedSlots: { customRender: 'showStatus' }
  },
  {
    title: '执行人',
    dataIndex: 'executor',
    align: 'center',
    width: 100
  },
  {
    title: '完成日期',
    dataIndex: 'finishedTime',
    align: 'center',
    width: 100
  },
  {
    title: '患者评价',
    dataIndex: 'score',
    align: 'center',
    width: 120,
    scopedSlots: { customRender: 'showScore' }
  },
  {
    title: '备注',
    dataIndex: 'remark',
    align: 'center',
    width: 150
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    width: 150,
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'DetailsTable',
  props: ['data', 'executor', 'status'],
  data() {
    return {
      pagination: {},
      loading: false,
      confirmLoading: false,
      columns,
      visible: false,
      serviceItemId: 0,
      remark: '',
      url: {
        setStatusUrl: '/107/03/1070318',
        delete: '/107/03/1070322',
      }
    }
  },
  methods: {
    setFinish(dataId) {
      if (this.status == 3 || this.status == 4) return
      this.remark = ''
      this.serviceItemId = dataId
      this.visible = true
    },
    hideModal() {
      this.remark = ''
      this.visible = false
    },
    async updateStatus() {
      this.confirmLoading = true

      const res = await postAction(this.url.setStatusUrl, {
        remark: this.remark,
        serviceItemId: this.serviceItemId,
        type: 1
      }).finally(_ => {
        this.confirmLoading = false
      })

      if (res.success) {
        this.hideModal()
        this.$emit('refresh')
      } else {
        this.$message.error(res.message)
      }
    },
    deleteService(id) {
      let that = this
      this.$confirm({
          title: "确认删除",
          content: "是否删除当前服务项?",
          onOk: function () {
            that.confirmLoading = true
            deleteAction(that.url.delete, {id}).then(res => {
              if (res.success) {
                that.$emit('refresh')
              } else {
                that.$message.error(res.message)
              }
            }).finally(_ => {
              that.confirmLoading = false
            })
          }
        });
      
    }
  }
}
</script>

<style lang="less" scoped>
.executor__name {
  margin-bottom: 1rem;
}

.remark__bottom {
  display: flex;
}

.remark__title {
  display: inline-block;
  width: 55px;
  margin-right: 0.2rem;
}

.remark__input {
  position: relative;
  display: flex;
  width: 320px;
  align-items: flex-end;

  div {
    margin-left: 0.5rem;
  }
}

.input__flex {
  flex: 1;
}

.finish__icon {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background: #52c41a;
  display: inline-block;
  position: relative;
}
.finish__icon:before,
.finish__icon::after {
  content: '';
  height: 28px;
  width: 6px;
  border-radius: 10px;
  display: block;
  background: white;
  position: absolute;
  top: 6px;
  /*40-6=34*/
  left: 20px;
  /*make the two rects in the middle of the cycle */
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}

.finish__icon::before {
  height: 15px;
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  position: absolute;
  top: 18px;
  /*40-18=12  */
  left: 8px;
}

.unfinish__icon {
  background: #d9d9d9;
}
</style>

